<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
        	(function($){
        		$(function(){
        			$('.btns a').eq(0).css({
        				background:'white',
        				border:0
        			});
        			var k=0,m=0;
        			ajaxLoad();
        			//点击数字按键加载ajax====================================
        			$('.btns a').not('.next').click(function(){
        				
        				$('.btns a').css({
        					border:'1px solid #ddd',
							background:'#f7f6f6'
        				});
        				ajaxNumber($(this).text())
        				$(this).css({
        					background:'white',
        					border:0
        				})
        				m=$(this).text();
        			    k=m

        			});
        			//点击下一页ajax加载=========================
        			var k=m;
        			console.log(k)
        				$('.next').click(function(){
							
	        				$('.btns a').css({
	        					border:'1px solid #ddd',
								background:'#f7f6f6'
	        				});
	        				if(k<=5){
	        					$('.btns a').eq(k).css({
	        						background:'white',
	        						border:0
	        					});
	        				}
	        				ajaxLoad();
	        				k++;
        				});
        			console.log(m)
        			
        			//ajax加载=========================
        			function ajaxLoad(){
        				$.ajax({
	        				url: 'http://sclub.jd.com/productpage/p-418657-s-0-t-3-p-'+k+'.html',

	        				type: 'GET',
	        				dataType: 'jsonp',
	        				jsonpCallBack:'fetchJSON_comment98vv17936',
	        				error:function() {
	        					console.log('error');
	        				},
	        				success:function(data){
                                console.log(data);
	        					for(var i=0;i<$('.comment1').length;i++){
	        						$('.comment1').eq(i).find('.chat').text(data.comments[i].content);
	        						$('.comment1').eq(i).find('.user img').attr('src',data.comments[i].userImageUrl);
                                    $('.comment1').eq(i).find('.phone').html(data.comments[i].userClientShow);
                                    //userClientShow
                                    console.log(data.comments[i].userImageUrl)
                                    //console.log($('.comment1').eq(i).find('.user img'))
	        						$('.comment1').eq(i).find('.date').text(data.comments[i].creationTime);
	        						$('.comment1').eq(i).find('.day span').text(data.comments[i].days);
	        						$('.comment1').eq(i).find('.s-color').text(data.comments[i].productColor);
	        						$('.comment1').eq(i).find('.s-size').text(data.comments[i].productSize);
	        						$('.comment1').eq(i).find('.user span').text(data.comments[i].nickname);
	        						$('.comment1').eq(i).find('.userLevelName').text(data.comments[i].userLevelName);
                                    $('.comment1').eq(i).find('.viewCount').text(data.comments[i].viewCount);
                                    $('.comment1').eq(i).find('.replayCount').text(data.comments[i].replayCount);
	        						$('.comment1').eq(i).find('.userProvince').text(data.comments[i].userProvince);
                                    $('.comment1').eq(i).find('.flag').css({
                                        backgroundPosition:-(5-data.comments[i].anonymousFlag)*17+'px 0' 
                                    });
	        					}
	        					

	        				},
	        				
        				});
        			}
        			//ajaxNumber==================================================
        			function ajaxNumber(page){
        				$.ajax({
	        				url: 'http://sclub.jd.com/productpage/p-418657-s-0-t-3-p-'+page+'.html',
	        				type: 'GET',
	        				dataType: 'jsonp',
	        				jsonpCallBack:'fetchJSON_comment98vv17936',
	        				error:function() {
	        					console.log('error');
	        				},
	        				success:function(data){
	        					for(var i=0;i<$('.comment1').length;i++){
	        						$('.comment1').eq(i).find('.chat').text(data.comments[i].content);
	        						$('.comment1').eq(i).find('.user img').attr('src',data.comments[i].userImageUrl);
	        						$('.comment1').eq(i).find('.date').text(data.comments[i].creationTime);
	        						$('.comment1').eq(i).find('.day span').text(data.comments[i].days);
	        						$('.comment1').eq(i).find('.s-color').text(data.comments[i].productColor);
	        						$('.comment1').eq(i).find('.s-size').text(data.comments[i].productSize);
	        						$('.comment1').eq(i).find('.user span').text(data.comments[i].nickname);
                                    $('.comment1').eq(i).find('.viewCount').text(data.comments[i].viewCount);
                                    $('.comment1').eq(i).find('.replayCount').text(data.comments[i].replayCount);
	        						$('.comment1').eq(i).find('.userLevelName').text(data.comments[i].userLevelName);
                                    $('.comment1').eq(i).find('.phone').html(data.comments[i].userClientShow);
	        						$('.comment1').eq(i).find('.userProvince').text(data.comments[i].userProvince);
                                    $('.comment1').eq(i).find('.flag').css({
                                        backgroundPosition:-data.comments[i].anonymousFlag*17+'px 0' 
                                    });
	        					}
	        					

	        				},
	        				
        				});
        			}
        			//划过显示赞和回复=========================================
        			for(var j=0;j<$('.comment1').length;j++){
        				//console.log($(this))
	        			$('.comment1').eq(j).find('.comment1-center').hover(function(){
	        				$(this).find('.agree' ).css('display','block');
	        			},function(){
	        				$(this).find('.agree' ).css('display','none');
	        			});
        			}
        			
        		});
        	})(jQuery);
        </script>
        <style type="text/css">
        	*{
        		margin:0;padding:0;
        	}
        	a{
        		text-decoration:none;
        		color:#666;
        	}
        	#box{
        		
        		width:1000px;
        		margin:10px auto;
        		border:1px solid black;
        		padding:10px;
        		
        	}
        	.comment1{
        		padding:10px;
				width:900px;
				margin:0 auto;
				border-bottom:1px solid #ccc;
				font-size:12px;
				line-height:20px;
				color:#666;
        	}
        	.comment1:after{
        		content: ".";
				display: block;
				height: 0;
				clear: both;
				visibility: hidden;
        	}
        	.comment1 .comment1-left{
        		float:left;
        		
        		width:150px;
        	}
        	.comment1 .comment1-left .flag{
				height:20px;
				width:85px;
                background-image:url('star-bg.png');
                background-repeat:no-repeat;
				
        	}
        	.comment1 .comment1-center{
        		float:left;
        		padding-right:10px;
        		width:590px;
        	}
        	.comment1 .comment1-center .chat{
        		min-height:20px;
        	}
        	.comment1 .comment1-center .agree{
        		
        		display:none;
        		margin-top:10px;
        	}
        	
        	.comment1 .comment1-right{
        		float:left;
        		
        		width:150px;
        	}
        	.comment1 .comment1-right a:hover{
        		color:red;
        	}
        	.comment1 .comment1-right .member .gold{
        		color:green;
        	}
        	.comment1 .comment1-right img{
        		height:25px;
        		width:25px;
				border-radius:50%;
				margin-right:8px;
        	}
        	.comment1 .comment1-right .user span{
				line-height:20px;
        	}
        	.btns{
        		text-align:right;
        	}
        	.btns a{
				display:inline-block;
				height:26px;
				padding:0 12px;
				border:1px solid #ddd;
				border-radius:2px;
				background:#f7f6f6;
				text-align:center;
				line-height:26px;
				margin-top:30px;
        	}
        	.btns span{
        		color:#666;
        	}
        </style>
    </head>
    <body>
    	<div id="box">
    	<!--第一条评论=======================================-->
    		<div class="comment1">
    			<div class="comment1-left">
    				<p class="flag"></p>
    				<p class="day">收货<span></span>后评论</p>
    				<p class="date"></p>
    				<p class="size"><span class="s-color"></span><span class="s-size"></span></p>
    			</div>
    			<div class="comment1-center">
    				<p class="chat"></p>
    				<p class="agree">点赞(<span class="viewCount">0</span>) 回复(<span class="replayCount">0</span>)</p>
    			</div>
    			<div class="comment1-right">
    				<div class="user"><img src="user-img.jpg"/><span></span></div>
    				<p class="member"><span class="userLevelName"></span> <span class="userProvince"> </span></p>
    				<p class="phone"></a>
    			</div>
    		</div>
		<!--第一条评论结束=======================================-->


		<!--第一条评论=======================================-->
    		<div class="comment1">
    			<div class="comment1-left">
    				<p class="flag"></p>
    				<p class="day">收货<span>3</span>后评论</p>
    				<p class="date">2012-12-12 12:12</p>
    				<p class="size"><span class="s-color">蓝色</span><span class="s-size">L码</span></p>
    			</div>
    			<div class="comment1-center">
    				<p class="chat"></p>
    				<p class="agree">点赞(<span class="viewCount">0</span>) 回复(<span class="replayCount">0</span>)</p>
    			</div>
    			<div class="comment1-right">
    				<div class="user"><img src="user-img.jpg"/><span>kkkkkk</span></div>
    				<p class="member"><span class="userLevelName">金牌会员 </span> <span class="userProvince"> 四川</span></p>
    				<a href="http://app.jd.com/android.html' target='_blank">来自京东手机客户端</a>
    			</div>
    		</div>
		<!--第一条评论结束=======================================-->


		<!--第一条评论=======================================-->
    		<div class="comment1">
    			<div class="comment1-left">
    				<p class="flag"></p>
    				<p class="day">收货<span>3</span>后评论</p>
    				<p class="date">2012-12-12 12:12</p>
    				<p class="size"><span class="s-color">蓝色</span><span class="s-size">L码</span></p>
    			</div>
    			<div class="comment1-center">
    				<p class="chat"></p>
    				<p class="agree">点赞(<span class="viewCount">0</span>) 回复(<span class="replayCount">0</span>)</p>
    			</div>
    			<div class="comment1-right">
    				<div class="user"><img src="user-img.jpg"/><span>kkkkkk</span></div>
    				<p class="member"><span class="userLevelName">金牌会员 </span> <span class="userProvince"> 四川</span></p>
    				<p class="phone"></a>
    			</div>
    		</div>
		<!--第一条评论结束=======================================-->


		<!--第一条评论=======================================-->
    		<div class="comment1">
    			<div class="comment1-left">
    				<p class="flag"></p>
    				<p class="day">收货<span>3</span>后评论</p>
    				<p class="date">2012-12-12 12:12</p>
    				<p class="size"><span class="s-color">蓝色</span><span class="s-size">L码</span></p>
    			</div>
    			<div class="comment1-center">
    				<p class="chat"></p>
    				<p class="agree">点赞(<span class="viewCount">0</span>) 回复(<span class="replayCount">0</span>)</p>
    			</div>
    			<div class="comment1-right">
    				<div class="user"><img src="user-img.jpg"/><span>kkkkkk</span></div>
    				<p class="member"><span class="userLevelName">金牌会员 </span> <span class="userProvince"> 四川</span></p>
    				<p class="phone"></a>
    			</div>
    		</div>
		<!--第一条评论结束=======================================-->


		<!--第一条评论=======================================-->
    		<div class="comment1">
    			<div class="comment1-left">
    				<p class="flag"></p>
    				<p class="day">收货<span>3</span>后评论</p>
    				<p class="date">2012-12-12 12:12</p>
    				<p class="size"><span class="s-color">蓝色</span><span class="s-size">L码</span></p>
    			</div>
    			<div class="comment1-center">
    				<p class="chat"></p>
    				<p class="agree">点赞(<span class="viewCount">0</span>) 回复(<span class="replayCount">0</span>)</p>
    			</div>
    			<div class="comment1-right">
    				<div class="user"><img src="user-img.jpg"/><span>kkkkkk</span></div>
    				<p class="member"><span class="userLevelName">金牌会员 </span> <span class="userProvince"> 四川</span></p>
    				<p class="phone"></a>
    			</div>
    		</div>
		<!--第一条评论结束=======================================-->

		<!--第一条评论=======================================-->
    		<div class="comment1">
    			<div class="comment1-left">
    				<p class="flag"></p>
    				<p class="day">收货<span>3</span>后评论</p>
    				<p class="date">2012-12-12 12:12</p>
    				<p class="size"><span class="s-color">蓝色</span><span class="s-size">L码</span></p>
    			</div>
    			<div class="comment1-center">
    				<p class="chat"></p>
    				<p class="agree">点赞(<span class="viewCount">0</span>) 回复(<span class="replayCount">0</span>)</p>
    			</div>
    			<div class="comment1-right">
    				<div class="user"><img src="user-img.jpg"/><span>kkkkkk</span></div>
    				<p class="member"><span class="userLevelName">金牌会员 </span> <span class="userProvince"> 四川</span></p>
    				<p class="phone"></a>
    			</div>
    		</div>
		<!--第一条评论结束=======================================-->

		<!--第一条评论=======================================-->
    		<div class="comment1">
    			<div class="comment1-left">
    				<p class="flag"></p>
    				<p class="day">收货<span>3</span>后评论</p>
    				<p class="date">2012-12-12 12:12</p>
    				<p class="size"><span class="s-color">蓝色</span><span class="s-size">L码</span></p>
    			</div>
    			<div class="comment1-center">
    				<p class="chat"></p>
    				<p class="agree">点赞(<span class="viewCount">0</span>) 回复(<span class="replayCount">0</span>)</p>
    			</div>
    			<div class="comment1-right">
    				<div class="user"><img src="user-img.jpg"/><span>kkkkkk</span></div>
    				<p class="member"><span class="userLevelName">金牌会员 </span> <span class="userProvince"> 四川</span></p>
    				<p class="phone"></a>
    			</div>
    		</div>
		<!--第一条评论结束=======================================-->

		<!--第一条评论=======================================-->
    		<div class="comment1">
    			<div class="comment1-left">
    				<p class="flag"></p>
    				<p class="day">收货<span>3</span>后评论</p>
    				<p class="date">2012-12-12 12:12</p>
    				<p class="size"><span class="s-color">蓝色</span><span class="s-size">L码</span></p>
    			</div>
    			<div class="comment1-center">
    				<p class="chat"></p>
    				<p class="agree">点赞(<span class="viewCount">0</span>) 回复(<span class="replayCount">0</span>)</p>
    			</div>
    			<div class="comment1-right">
    				<div class="user"><img src="user-img.jpg"/><span>kkkkkk</span></div>
    				<p class="member"><span class="userLevelName">金牌会员 </span> <span class="userProvince"> 四川</span></p>
    				<p class="phone"></a>
    			</div>
    		</div>
		<!--第一条评论结束=======================================-->


		<!--第一条评论=======================================-->
    		<div class="comment1">
    			<div class="comment1-left">
    				<p class="flag"></p>
    				<p class="day">收货<span>3</span>后评论</p>
    				<p class="date">2012-12-12 12:12</p>
    				<p class="size"><span class="s-color">蓝色</span><span class="s-size">L码</span></p>
    			</div>
    			<div class="comment1-center">
    				<p class="chat"></p>
    				<p class="agree">点赞(<span class="viewCount">0</span>) 回复(<span class="replayCount">0</span>)</p>
    			</div>
    			<div class="comment1-right">
    				<div class="user"><img src="user-img.jpg"/><span>kkkkkk</span></div>
    				<p class="member"><span class="userLevelName">金牌会员 </span> <span class="userProvince"> 四川</span></p>
    				<p class="phone"></a>
    			</div>
    		</div>
		<!--第一条评论结束=======================================-->


		<!--第一条评论=======================================-->
    		<div class="comment1">
    			<div class="comment1-left">
    				<p class="flag"></p>
    				<p class="day">收货<span>3</span>后评论</p>
    				<p class="date">2012-12-12 12:12</p>
    				<p class="size"><span class="s-color">蓝色</span><span class="s-size">L码</span></p>
    			</div>
    			<div class="comment1-center">
    				<p class="chat"></p>
    				<p class="agree">点赞(<span class="viewCount">0</span>) 回复(<span class="replayCount">0</span>)</p>
    			</div>
    			<div class="comment1-right">
    				<div class="user"><img src="user-img.jpg"/><span>kkkkkk</span></div>
    				<p class="member"><span class="userLevelName">金牌会员 </span> <span class="userProvince"> 四川</span></p>
    				<p class="phone"></a>
    			</div>
    		</div>
		<!--第一条评论结束=======================================-->
			<div class="btns">
	    		<a href="#box">1</a>
	    		<a href="#box">2</a>
	    		<a href="#box">3</a>
	    		<a href="#box">4</a>
	    		<a href="#box">5</a>
	    		<span >...</span>
	    		<a class="next" href="#box">下一页</a>
	    	</div>

    	</div>
    	
    </body>
</html>